<template>
	<view class="box">
		<view class="dan" v-for="(item, index) in questionList" :key="index" >
			<view class="top">
				<span class="s1">{{ indexid }}</span>/{{ length }}
				<span class="s2">{{
          item.F_Qtype == 1 ? "单选题" : item.F_Qtype == 2 ? "多选题" : "填空题"
        }}</span>
				(2分)
			</view>
			<view class="con">
				<view class="title"> {{ item.F_Qtitle }} </view>

				<view class="con_li" v-for="(x, y) in optionlist" :key="y">
					<span class="s1">{{ x.F_QuestionItemContent }}</span>
					<span style="color: aquamarine; font-size: 18px; margin-right: 20px">{{ y == 1 ? "√" : "" }}</span>
				</view>
			</view>
			<view class="don">
				<view class="title"> 试题解析 </view>
				<view class="top0">
					<view class="top_1">
						{{ item.F_Qanswer==item.F_AnswerInfo ? "回答正确" : "回答错误" }}
					</view>
					<view class="top_2">
						<view class="t2_1">
							<p>正确答案</p>
							<p>
								{{item.F_Qanswer}}
							</p>
						</view>
						<view class="t2_2">
							<p>我的答案</p>
							<p>{{item.F_AnswerInfo}}</p>
						</view>
					</view>
				</view>
				<view class="title"> 解析 </view>
				<view class="u-line-4">
					{{ item.F_Qanalysis }}
				</view>
				<view class="title"> 相关考点 </view>
				<view class="don_box u-line-1"> {{item.F_Qanalysis}} </view>
			</view>
			<u-popup v-model="show" mode="bottom">
				<view class="card">
					<view class="text"> 答题卡 </view>
					<view class="all">
						<view class="all-li" v-for="(item, index) in questionList" :key="index">
							{{ item.id }}
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="bottom">
			<view class="son" @click="last()">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="son" @click="shouc">
				<u-icon name="star" ref="shou"></u-icon>
				<p>收藏</p>
			</view>
			<view class="son">
				<u-icon name="calendar"></u-icon>
				<p>答题卡</p>
			</view>
		
			<view class="son" @click="next">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				analysisShow: true,
				id: 0,
				show: false,
				value: "",
				daTi: "",
				questionList: [],
				optionlist:[],
				indexid:'',
				length:''
				
			};
		},
		created() {
			this.diao();
			this.getabcd();
		},
		watch: {},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			console.log(option.id);
			//打印出上个页面传递的参数。
			this.aid = option.aid;
			this.id = option.id;
			this.indexid = option.index;
			this.length=option.length;
		},
		methods: {
			next() {
				this.daTi++;
				if (this.daTi >= this.questionList.length) {
					this.daTi = this.questionList.length;
				}
				this.id = this.daTi;
			},
			last() {
				this.daTi--;
				if (this.daTi <= 0) {
					this.daTi = 1;
				}
				this.id = this.daTi;
			},
			get() {
				this.show = true;
			},

			shouc() {},
			getabcd() {
				
				var query = {
					questionId: this.id,
				};
				request({
						url: "/api/system/DataInterface/354686548295288325/Actions/Response",
						method: "POST",
						Headers: {
							"Content-Type": "application/json;charset=UTF-8"
						},
						data: JSON.stringify(query),
					})
					.then((res) => {
						console.log(res.data);
						this.optionlist=res.data.data

					})
					.catch(() => {
						console.log("xxx");
					});
			},
			diao() {
				var query = {
					questionsId: this.id,
					AnswersheetId:this.aid
				};
				request({
						url: "/api/system/DataInterface/354682616219174405/Actions/Response",
						method: "POST",
						Headers: {
							"Content-Type": "application/json;charset=UTF-8"
						},
						data: JSON.stringify(query),
					})
					.then((res) => {
						console.log(res.data);
						this.questionList=res.data.data
					})
					.catch(() => {});
			},
			mounted() {},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		padding: 14rpx;
		background-color: #eef3f4;

		.don {
			height: 934rpx;
			border-radius: 16rpx;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx;

			.top0 {
				height: 226rpx;
				background-color: #f8f8f8;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 22rpx;

				.top_1 {
					font-weight: 500;
					color: #f9775a;
					font-size: 30rpx;
				}

				.top_2 {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-around;
				}
			}

			.title {
				margin-top: 20rpx;
				height: 48rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx;
			}

			.don_box {
				height: 108rpx;
				border-radius: 8rpx;
				opacity: 1;
				border: 2rpx solid #f2f4f5;
				line-height: 108rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}

		.card {
			height: 940rpx;
			overflow: auto;

			.all {
				.all-li {
					width: 80rpx;
					height: 80rpx;
					background-color: #f8f8f8;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					float: left;
					margin-left: 48rpx;
					margin-right: 10rpx;
					margin-top: 50rpx;
				}
			}

			.text {
				height: 100rpx;
				font-size: 40rpx;
				font-weight: 500;
				line-height: 100rpx;
				text-align: center;
			}
		}

		.bottom {
			margin-top: 240rpx;
			height: 126rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.son {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.con {
			height: 712rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 30rpx;

			.title {
				height: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				color: #333;
				margin-bottom: 32rpx;

				.text {
					border-bottom: 1px solid black;
				}
			}

			.con_li {
				height: 120rpx;
				border-radius: 16rpx;
				background-color: #f8f8f8;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s1 {
					margin-left: 20rpx;
					margin-right: 20rpx;
					font-size: 36rpx;
				}
			}
		}

		.top {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 26rpx;
			border-radius: 16rpx;

			.s1 {
				font-size: 38rpx;
				color: #1776ce;
			}

			.s2 {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-left: 24rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
